<template>
    <div>
        <div class="box">
            <horder class="horder">
                <van-nav-bar title="购物车" left-text="" left-arrow @click-left="$router.go(-1)" />
            </horder>
            <main class="main">
                <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                    description="描述文字" />
                    <p style="text-align: center;">猜你喜欢</p>
                    <ul style="column-count: 2;">
                            <li v-for="item in list" :key="item.id" style="break-inside: avoid;" @click="$router.push('/detail/'+item.id)" keep-alive>
                                <img :src="item.image" alt="" style="width: 100%;">
                                <p>{{ item.title }}</p>
                                <p>{{ item.price }}</p>
                            </li>
                        </ul>
            </main>
        </div>
    </div>
</template>

<script setup>
import api from '@/api/api'
import { onMounted, ref } from 'vue'
const list = ref([])
onMounted(() => {
    api.get('/list', {
        params: { pagination: 1, pageNum: 30 }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
})
</script>

<style lang="scss" scoped></style>